<template>
	<!-- 有数据 -->
	<view class="cart_box" v-if="buffer">
		<view class="cart_head">
			<view class="cart_menu">
				<text>全部(20)</text>
				<text>降价(4)</text>
				<text>常卖(2)</text>
				<text>分类</text>
			</view>
			<view class="cart_ticket">
				<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
				<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
				<checkbox color="#FF6040" value="true" />
				<text class="cart_ticket_text1">小U自营</text>
				<text class="cart_ticket_text2">以免运费 |</text>
				<text class="cart_ticket_text3">领券</text>
			</view>
		</view>

		<view class="container">
			<view class="top">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" v-for="(item,index) in cartList"
					:key="item.id">
					<view class="cartInfo" id="demo1">
						<!-- 明日来写购物车基本信息 -->
						<view class="cartInfochild">
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<checkbox-group @change="changeOneChecked(index)">
									<checkbox color="#FF6040" :checked="item.status == 1 ? true : false" value="1" />
								</checkbox-group>

								<!-- <switch type="checkbox" :checked="true"  color="#ff6040" /> -->
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common">
								<image :src="baseUrl + item.img" mode="widthFix"></image>
							</view>

							<!-- 信息 -->
							<view class="cartInfo_info">
								<label style="font-size: 32rpx;">{{item.goodsname}}</label>
								<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
								<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥100</label>
								<label style="color:#FF6040;">￥
									<text style="font-size: 40rpx;color:#FF6040;">{{ item.price }}
									</text> <text>￥{{ item.price }}</text>
								</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child">
									<label @click="desc(index)">－</label>
									<label>{{ item.num }}</label>
									<label @click="asc(index)">＋</label>
								</view>
							</view>
						</view>

					</view>
					<view class="cartDel" id="demo2" @click="doDelete(index,item.id)">
						<label for="">删除</label>
					</view>
				</scroll-view>
			</view>

			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
					<checkbox-group @change="changeAllChecked">
						<checkbox color="#FF6040" value="1" :checked="allChecked" />
					</checkbox-group>
					<!-- <switch type="checkbox" :checked="true" color="#ff6040" /> -->
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{ totalPrice }}</label></view>
					<label class="footd2sp2">不含运费，已优惠￥0.00</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" hover-class="touchOpacity" @click="toOrderPage">
					<!-- 被选中的商品的个数 -->
					<label>去结算({{ totalNum }}件)</label>
				</view>
			</view>

		</view>
	</view>
	<!-- 无数据提示 -->
	<view v-else>
		<cartnull />
	</view>
</template>

<script>
	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue';
	export default {
		components: {
			cartnull
		},
		data() {
			return {
				baseUrl: this.$URL,
				cartList: [], //初始化购物车数据
				buffer: true, //检测购物车是否有数据
			}
		},
		// 页面显示时
		onShow() {
			this.getCarts()
		},
		// 使用计算属性
		computed: {
			// 1.总价
			totalPrice() {
				var totalPrice = 0;
				// 所有被选中的商品，数量*单价的累加和
				this.cartList.map((item, index) => {
					if (item.status) {
						// 正常做累加
						totalPrice += parseInt(item.num) * parseInt(item.price);
					}
				})
				return totalPrice;
			},
			// 2.总个数
			totalNum() {
				var totalNum = 0;
				this.cartList.map((item, index) => {
					if (item.status) {
						// 正常做累加
						totalNum += parseInt(item.num);
					}
				})
				return totalNum;
			},
			// 3.全选状态
			allChecked() {
				let allChecked = this.cartList.every((item) => {
					return item.status
				})

				return allChecked;
			}
		},
		methods: {
			// 8点击结算按钮，进入确认订单页面
			toOrderPage(){
				//  需要携带所有被选中的商品及总金额和总数量
				// 1.过滤被选中的商品
				let  carts =  this.cartList.filter((item,index)=>{
					return  item.status ==1;
				})
				if(this.totalNum <=0){
					this.$tips.showtoast('至少选择一个商品')
					return;
				}
				// console.log(carts)
				// 2.将 carts 和总金额和总数量存入缓存中
				uni.setStorageSync("cartsInfo",{carts,totalPrice:this.totalPrice,totalNum:this.totalNum})
				
				// 3.执行跳转
				uni.navigateTo({
					url:"../order/order"
				})
			},
			// 7.执行删除
			async doDelete(index, id) {
				// api ：cartdelete
				// pararms： id 购物车数据id
				// header  
				var header = getApp().globalData.header;
				var option = {
					url: "cartdelete",
					data: {
						id
					},
					header,
					method: "post"
				}
				let res = await this.$http(option);
				// console.log(res)
				if (res.data.code == 403) {
					// 过期了
					this.$tips.restore(this, app);
					uni.showModal({
						title: res.data.msg,
						content: "您确定重新登录么？",
						success(result) {
							// console.log(res)
							if (result.confirm) {
								// 同意登录
								uni.switchTab({
									url: "../user/user"
								})
							} else {
								// 不同意登录
								uni.switchTab({
									url: "../index/index"
								})
							}
						}
					})
				} else if (res.data.code == 200) {
					// 删除成功
					// 1.更新列表页面
					this.cartList.splice(index,1)
					// 2.更新购物车角标（徽章）
					if(this.cartList.length > 0){
						uni.setTabBarBadge({
							index:2,
							text:this.cartList.length.toString()
						})
					}else{
						this.buffer =false;
						uni.removeTabBarBadge({
							index:2
						})
					}
					
				}

			},
			//6.执行修改 
			async doUpdate(index, type) {
				// api: cartedit
				// params: id  type(1减,2加)
				// header 
				var header = getApp().globalData.header;
				var option = {
					url: "cartedit",
					data: {
						id: this.cartList[index].id,
						type
					},
					method: "post",
					header,
				}
				// 进行修改
				let res = await this.$http(option);
				// console.log(res)
				if (res.data.code == 403) {
					// 过期了
					this.$tips.restore(this, app);
					uni.showModal({
						title: res.data.msg,
						content: "您确定重新登录么？",
						success(result) {
							// console.log(res)
							if (result.confirm) {
								// 同意登录
								uni.switchTab({
									url: "../user/user"
								})
							} else {
								// 不同意登录
								uni.switchTab({
									url: "../index/index"
								})
							}
						}
					})
				}

			},
			// 5.更改所有商品的订单状态
			changeAllChecked(e) {
				// console.log(e)
				// e.mp.detail.value    ==>  取消[]   选中[1]
				// console.log(e.mp.detail.value.length)
				// status =  0 ||  1
				this.cartList.map((item) => {
					item.status = e.mp.detail.value.length
				})

			},
			// 4.更改单个商品的状态
			changeOneChecked(index) {
				this.cartList[index].status = this.cartList[index].status == 1 ? 0 : 1;
			},
			// 3.数量减少
			desc(index) {
				this.cartList[index].num--
				if (this.cartList[index].num <= 0) {
					this.cartList[index].num = 1;
					return;
				}
				this.doUpdate(index, 1)

			},
			// 2.数量增加
			asc(index) {
				this.cartList[index].num++;
				this.doUpdate(index, 2)
			},
			// 1.获取购物车信息
			async getCarts() {
				//  API: cartlist  
				//  params： uid   header(token) 
				let app = getApp();
				let uid = app.globalData.userInfo.uid;
				let header = app.globalData.header;
				// 参数
				var option = {
					url: "cartlist",
					data: {
						uid
					},
					header,
					// header:{
					// 	"content-type":"application/json",
					// 	"authorization":"1234567890",
					// }
				}
				// 发起请求
				let res = await this.$http(option);
				console.log(res)
				if (res.data.code == 403) {
					// 过期了
					this.$tips.restore(this, app);
					uni.showModal({
						title: res.data.msg,
						content: "您确定重新登录么？",
						success(result) {
							// console.log(res)
							if (result.confirm) {
								// 同意登录
								uni.switchTab({
									url: "../user/user"
								})
							} else {
								// 不同意登录
								uni.switchTab({
									url: "../index/index"
								})
							}
						}
					})
				} else if (res.data.code == 200) {
					// 请求成功
					if (res.data.list == null) {
						// 没有数据
						this.buffer = false
					} else {
						this.buffer = true;
						this.cartList = res.data.list;
						uni.setTabBarBadge({
							index: 2,
							text: this.cartList.length.toString(), //强制转换为字符串
						})
					}

				}
			}
		}
	}
</script>

<style scoped>
	/* 引入样式文件 */
	@import url("@/static/css/cart.css");
</style>
